<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Title</title>
    <style>
        .picStr{
            border-radius: 30px;
            outline: none;
            border: 1px solid #ddd;
            padding-left: 15px;
            width: 150px;
            height: 30px;
        }
        #code{
            height: 50px;
            vertical-align: middle;
            min-width: 100px;
            border: 1px solid #000;
        }
        .button-group{
            margin-top: 10px;
        }
        .button-group button{
            text-align: center;
            border-radius: 25px;
            font-size: 14px;
            color: #fff;
            background: linear-gradient(180deg,#22cdff,#3fa4ff);
            cursor: pointer;
            border: none;
            padding: 10px 25px;
            margin-right: 18px;
            outline: none;
        }
        #getdata[disabled=disabled]{
            background: #e9eaec;
            color: #ccc;
        }
        #message{
            text-align: center;
            width: 100%;
            line-height: 100px;
        }
        .input-login {
            margin: 10px 20px;
        }
    </style>
</head>
<body>
    <div class="input-login">
        用户名：<input type="text" id="username" class="picStr" value="15351217062">
    </div>
    <div class="input-login">
        密码：<input type="password" id="password" class="picStr" value="CT15351217062">
    </div>
    <div class="input-login">
        验证码：<input type="text" id="picStr" class="picStr">
    </div>
    <div>
        <img id="code" src="/static/verifyCode.jpg" alt="图片验证码">
    </div>
<div class="button-group">
    <button id="login">登录快递超市</button>
    <button id="getdata" disabled="disabled">获取快递数据</button>
</div>
<div style="height: 0; overflow: hidden">
    <div id="message">
        <div>当前正在获取第<span>1</span>页的内容..</div>
    </div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="/static/layer/layer.js"></script>
<script>
    var msgLayer;
    //获取数据
    function getKdData(page=1){
        var data;
        $.post('getdata', {page: page}, function(res){
            if(res.code == 1){
                data = res.data
                layer.msg('获取第'+page+'页数据成功('+res.msg+')', {
                    icon:1,
                    time: 2000,
                })
                if(res.complete){
                    setTimeout(()=>{
                        layer.close(msgLayer);
                        layer.alert('数据获取完成');
                    },2000)
                }else{
                    $('#message div span').text(page + 1)
                    getKdData(page + 1);
                }
            }else{
                console.log(res)
                data = false;
                layer.alert('获取第'+page+'页数据失败,错误信息请查看控制台', {shade:0, resize:false})
            }
        })
        
        return data;
    }

    $(function () {
        var _session = '';
        $.get('getSession',function (res) {
            console.log(res)
            if(res.code === 0){
                _session = res.data
                $('#code')[0].src = '/static/verifyCode.jpg?d=' + Math.random()
            }else{
                layer.alert(res.msg);
            }
        },'json')

        $('#code').on('click',function () {
            $('#code')[0].src = ''
            $.get('getCode', function (res) {
                console.log(res)
                if(res.code === 0){
                    $('#code')[0].src = '/static/verifyCode.jpg?d=' + Math.random()
                }else{
                    layer.alert(res.msg);
                }
            },'json')
        })

        $('#picStr').on('keyup',function (e) {
            if(e.keyCode === 13) {
                $('#login').click()
            }
        })

        $('#login').on('click',function () {
            if(!$('#username').val()) {
                layer.alert('请输入用户名!')
                return
            }
            if(!$('#password').val()) {
                layer.alert('请输入密码!')
                return
            }
            if(!$('#picStr').val()) {
                layer.alert('请输入验证码!')
                return
            }
            $.post('login',{username: $('#username').val(), password: $('#password').val(), code: $('#picStr').val()},function (res) {
                console.log(res)
                if(res.code === 1){
                    $('#getdata').removeAttr('disabled')
                    layer.confirm('登录成功，是否获取数据？', {icon: 3, title: '提示'}, function(index){
                        layer.close(index)
                        getKdData()
                    });
                    return 
                }
                else if(res.code === -2){
                    $('#code').click()
                    layer.alert(res.msg)
                }
                else{
                    layer.alert('登录过期，确定后页面会刷新，请重新登录', function(index){
                        layer.close(index)
                        location.reload()
                    })
                }
            },'json')
        })

        $('#getdata').on('click', function(){
            getKdData()
        })

        // // 导入数据
        // var mylayer;
        // $('#importData').on('click',function () {
        //     mylayer = layer.msg('导入中···', {
        //         icon: 16
        //         ,shade: 0.3,
        //         time: 0
        //     });
        //     $.post('/admin/express/autoinstore',function (res) {
        //         mylayer = layer.alert(res.msg);
        //     },'json')
        // })
    })
</script>
</html>